<template>
	<u-popup v-model="show" border-radius='14' :closeable='false' mode="center" :mask-close-able="false">
		<view class="notice-show-popup">
			<img class='bg' src="../static/notice-popup-bg.png" alt="">
			<view class="flex-center">
				<img style='width: 212rpx;height: 140rpx;' src="../static/piao.png" alt="">
			</view>
			<view class="flex-column f28" style="color: rgba(102, 102, 102, 1);">
				<view class="mb30">
					<img class='img' src="../static/ok2.png" alt="">
					<text>购票成功后</text>
					<text style="color: rgba(255, 67, 69, 1)"> 不支持退款，不支持改签！</text>
				</view>
				<view class="mb30" style="display: flex;align-items: center;">
					<img class='img' src="../static/ok2.png" alt="">
					<view style="width: 100%;">如因您个人原因退票所产生的费用，完全由您个人承担。</view>
				</view>
				<view class="">
					<img class='img' src="../static/ok2.png" alt="">
					<text>请认真阅读上述购票须知</text>
				</view>
			</view>
			<view class="bottom flex-between align-center">
				<view class="flex-center align-center" @click="cancel">
					我不同意
				</view>
				<view class="flex-center align-center" @click="confirm">
					我已阅读
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			value: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			value: {
				handler(val) {
					this.show = val
				},
				immediate: true
			}
		},
		methods: {
			cancel() {
				this.$emit('input', false)
			},
			confirm() {
				this.$emit('input', false)
				this.$emit('confirm')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.notice-show-popup {
		width: 608rpx;
		display: flow-root;
		position: relative;
		.bg{
			position: absolute;
			top: 0;
			left: 0;
		}

		>view {
			position: relative;
			z-index: 1;
			&:nth-of-type(1) {
				padding: 40rpx 0 28rpx 0;
			}
			&:nth-of-type(2) {
				margin: 0 28rpx;
				padding: 32rpx 18rpx;
				border-radius: 12rpx;
				background: linear-gradient(to right,rgba(255, 106, 106, 0.07),transparent);
				.img {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}
			}
		}

		.bottom {
			margin: 32rpx 26rpx 36rpx 26rpx;

			>view {
				font-size: 28rpx;
				width: 266rpx;
				height: 84rpx;
				border-radius: 8rpx;
				background-color: rgba(221, 221, 221, 0.3500);
				color: rgba(102, 102, 102, 1);
				&:nth-of-type(2){
					color: white;
					background-color: rgba(255, 67, 69, 1);
				}
			}

		}
	}

</style>
